<template>
  <div class="out">
    <el-form ref="form" :inline="true" :model="form" label-width="100px" size="mini">
      <el-form-item label="选择供应商">
        <el-select v-model="supply_index" placeholder="请选择供应商" @change="bindSupply($event)">
          <el-option v-for="(item,index) in supplyArr" :key="index" :label="item.name" :value="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="采购日期">
        <el-date-picker type="date" placeholder="采购日期" 
        v-model="form.buyDate" style="width: 100%;"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="计划付款日期">
        <el-date-picker type="date" placeholder="计划付款日期" 
        v-model="form.payDate" style="width: 100%;"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="计划收货日期">
        <el-date-picker type="date" placeholder="收货日期" 
        v-model="form.takeDate" style="width: 100%;"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="配送地址">
        <el-input v-model="form.address" placeholder="配送地址" style="width:400px;"></el-input>
      </el-form-item>
    </el-form>
    <div class="title">
      <div>订单信息</div>
    </div>
    <el-table :data="list" style="width: 100%;margin-top:10px;"
        row-key="id" border lazy
        :tree-props="{children: 'son', hasChildren: 'hasChildren'}">
        <el-table-column label="选择商品" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.goods_index" placeholder="选择商品" size="mini" @change="bindGoods($event,scope)">
              <el-option v-for="(item,index) in goodsArr" :key="index" :label="item.name" :value="index"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="产品规格" align="center">
          <template slot-scope="scope">        
            <el-select v-model="scope.row.tag" placeholder="选择规格" size="mini">
              <el-option v-for="(item,index) in scope.row.tags" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="采购数量" align="center">
          <template slot-scope="scope">            
              <el-input v-model="scope.row.num" placeholder="采购数量" size="mini" @input="input($event,scope)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center">
          <template slot-scope="scope">            
              <el-input v-model="scope.row.lable" placeholder="单位" size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="user" label="单价" align="center">
          <template slot-scope="scope">            
              <el-input v-model="scope.row.price" placeholder="采购单价" size="mini" @input="input($event,scope)"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="user" label="商品价格" align="center">
          <template slot-scope="scope">            
              <el-input v-model="scope.row.money" placeholder="订单金额" size="mini"></el-input>
          </template>
        </el-table-column>
         <el-table-column
          fixed="left"
          label="操作"
          width="100" align="center">
          <template slot-scope="scope">
            <i @click="addLine" class="el-icon-circle-plus" style="color:#409EFF"></i>
            <i @click="lineDel(scope)"class="el-icon-delete-solid" style="color:#409EFF;margin-left:10px;"></i>
          </template>
        </el-table-column>
    </el-table>

    <div align="center" style="margin-top:10px;">
        <el-button type="primary" @click="add">创 建</el-button>
        <el-button @click="back">返 回</el-button>
      </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list:[{}],
      form: {},
      supplyArr:[],
      goodsArr:[],
      supply_index:0
    };
  },
  created:function(){
    this.form.supply_id = parseInt(this.$route.query.id)
    this.getSupply()
    this.getGoods()
  },
  methods: {
    getSupply:function(){
      var data = {store_id:localStorage.getItem('store_id')}
      var that = this
      this.$get('supply/all',data).then((res) => {
        that.supplyArr = res.data
        that.checkArr(res.data)
      })
    },
    checkArr:function(arr){
      for(var x in arr){
        if(arr[x]['id'] == this.form.supply_id){
          this.form.address =  arr[x]['address']
          this.supply_index = parseInt(x)
        }
      }
    },
    getGoods:function(){
      var data = {
        store_id:localStorage.getItem('store_id')
      }
      var that = this
      this.$get('goods/all',data).then((res) => {
        that.goodsArr = res.data
      })
    },
    addLine:function(){
      var list  = this.list
      this.list = list.concat({})
    },
    back:function(){
      this.$router.go(-1);//返回上一层
    },
    add:function(){
      if(!this.list[0].goods_id){
        this.$message.error('请至少选择一个商品!');
        return;
      }
      for(var x in this.list){
        if(this.list[x].goods_id){
          if(!this.list[x].num){
            this.$message.error('请填写采购数量!');
            return;
          }
          if(!this.list[x].price){
            this.$message.error('请填写采购单价!');
            return;
          }
        }
      }
      this.form.user_id = localStorage.getItem('user_id')
      this.form.store_id = localStorage.getItem('store_id')
      var data = {form:this.form,list:this.list}
      var that = this
      this.$post('buy/add',data).then((res) => {
        if(res.code == 1){
          that.$message.success('采购单下单成功!')
          that.list = [{}]
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    bindGoods:function(e,item){
      var list  = this.list
      var tags = this.goodsArr[e].tag
      this.list[item.$index].tags = tags.split(',')
      this.list[item.$index].goods_id = this.goodsArr[e].id
      this.list[item.$index].lable = this.goodsArr[e].lable
      //this.list = list.concat({})
      if(!this.list[item.$index + 1]){
        this.list = list.concat({})
      }
    },
    bindSupply:function(e){
      console.log(this.supplyArr)
      this.form.supply_id = this.supplyArr[e].id
      console.log(this.form)
      return;
      this.form.address = this.supplyArr[e].address
    },
    input:function(e,item){
      var index = item.$index
      this.list[index].money = this.list[index].num*this.list[index].price
    },
    lineDel:function(item){
      var index = item.$index
      this.list.splice(index,1)
    }
  },
};
</script>
<style>
.out{
    display:flex;
    flex-direction:column;
    padding: 30px;
}
.title{
  height:50px;
  line-height:50px;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  padding:0 20px 0 20px;
}
</style>